<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const collapsed = ref(false);

const menuItems = [
  {
    key: 'home',
    title: '首页',
    path: '/'
  },
  {
    key: 'bridge',
    title: '桥梁系统',
    path: '/bridge',
    children: [
      {
        key: 'bridge-devices',
        title: '设备列表',
        path: '/bridge/devices'
      },
      {
        key: 'bridge-alarms',
        title: '报警记录',
        path: '/bridge/alarms'
      }
    ]
  },
  {
    key: 'pipe-gallery',
    title: '管廊系统',
    path: '/pipe-gallery',
    children: [
      {
        key: 'pipe-gallery-products',
        title: '产品信息',
        path: '/pipe-gallery/products'
      },
      {
        key: 'pipe-gallery-devices',
        title: '设备信息',
        path: '/pipe-gallery/devices'
      },
      {
        key: 'pipe-gallery-videos',
        title: '视频列表',
        path: '/pipe-gallery/videos'
      },
      {
        key: 'pipe-gallery-alarms',
        title: '报警记录',
        path: '/pipe-gallery/alarms'
      },
      {
        key: 'pipe-gallery-warnings',
        title: '告警记录',
        path: '/pipe-gallery/warnings'
      }
    ]
  },
  {
    key: 'lift',
    title: '电梯系统',
    path: '/lift',
    children: [
      {
        key: 'lift-iot-devices',
        title: '物联设备',
        path: '/lift/iot-devices'
      },
      {
        key: 'lift-real-time-status',
        title: '电梯实时状态',
        path: '/lift/real-time-status'
      },
      {
        key: 'lift-fault-monitoring',
        title: '电梯故障监测',
        path: '/lift/fault-monitoring'
      },
      {
        key: 'lift-abnormal-details',
        title: '电梯异常详情',
        path: '/lift/abnormal-details'
      },
      {
        key: 'lift-maintenance',
        title: '维保管理',
        path: '/lift/maintenance'
      },
      {
        key: 'lift-annual-inspection',
        title: '年检管理',
        path: '/lift/annual-inspection'
      }
    ]
  }
];

const handleMenuClick = (item) => {
  router.push(item.path);
};
</script>

<template>
  <t-layout style="min-height: 100vh">
    <t-aside :width="collapsed ? '64px' : '232px'">
      <div class="logo" />
      <t-menu
        theme="dark"
        :value="'home'"
        :collapsed="collapsed"
      >
        <template v-for="item in menuItems" :key="item.key">
          <t-submenu v-if="item.children" :value="item.key">
            <template #title>
              <span>{{ item.title }}</span>
            </template>
            <t-menu-item 
              v-for="child in item.children" 
              :key="child.key"
              :value="child.key"
              @click="() => handleMenuClick(child)"
            >
              {{ child.title }}
            </t-menu-item>
          </t-submenu>
          <t-menu-item v-else :value="item.key" @click="() => handleMenuClick(item)">
            {{ item.title }}
          </t-menu-item>
        </template>
      </t-menu>
    </t-aside>
    <t-layout>
      <t-header style="padding: 0; background: #fff">
        <t-head-menu>
          <template #logo>
            <t-button variant="text" shape="square" @click="collapsed = !collapsed">
              <template #icon><t-icon name="view-list" /></template>
            </t-button>
          </template>
          <span style="margin-left: 16px">智能监控系统</span>
        </t-head-menu>
      </t-header>
      <t-content style="padding: 16px">
        <router-view></router-view>
      </t-content>
      <t-footer style="text-align: center">
        智能监控系统 ©2023 Created by Vue Team
      </t-footer>
    </t-layout>
  </t-layout>
</template>

<style>
body {
  margin: 0;
  padding: 0;
}

.logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
}
</style>
